<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head_css :: head(~{::title}, ~{::link}, ~{::style})">
    <meta charset="utf-8">
    <title>打卡结果</title>
    <style>
        .iconBox {
            padding: 0px;
            margin: 70px auto;
            text-align: center;
        }

        .infoBox {
            width: 80%;
            height: 80px;
            border-top: 1px solid #ccc;
            text-align: center;
            margin: 40px auto 10px;
        }
    </style>
    <link rel="stylesheet" th:href="@{/js/toastr/toastr.min.css}">
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">打卡结果</h1>
</header>
<div class="iconBox">
    <div>
        <img th:if="${result == 0}" src="../images/punch_normal.png"/>
        <div style="margin-top: 15px">打卡成功</div>
        <img th:if="${result != 0}" src="../images/punch_abnormal.png"/>
        <div th:if="${result == 1}">迟到打卡([[${min}]]分钟)</div>
        <div th:if="${result == 2}">早退打卡([[${min}]]分钟)</div>
        <div th:if="${isLocationAbnormal}">位置异常</div>
    </div>
</div>
<div class="infoBox">
    <div style="margin:10px auto; clear:both; line-height:30px">
        <div style="float:left; width:30%; text-align:left;">
            时间
        </div>
        <div style="float:right; width:70%; text-align:right;">
            [[${dtStr}]]
        </div>
    </div>
    <div style="margin:30px auto; clear:both;">
        <div style="float:left; width:30%; text-align:left;">
            位置
        </div>
        <div style="float:right; width:70%; text-align:right;">
            <th:block th:if="${isLocationAbnormal}">
                <div>[[${address}]]</div>
                <div>(位置异常)</div>
            </th:block>
            <th:block th:else >
                有效范围内
            </th:block>
        </div>
    </div>
</div>
<div th:if="${isLocationAbnormal or result != 0}" style="width:80%; margin:0px auto;">
    <div style="color:#6da3dc;margin:20px 0px 10px">报告原因</div>
    <div id="remarkBox">
    <textarea id="remark" name="remak" style="width:100%;height:80px">
    </textarea>
    </div>
    <div class="mui-button-row">
        <button id="btnOk" type="button" class="mui-btn">确定</button>
    </div>
    <div class="mui-row" style="height:20px">
        &nbsp;
    </div>
</div>
<div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=3dd31b657f333528cc8b581937fd066a"></script>
<script th:src="@{/js/toastr/toastr.min.js}"></script>
<script th:inline="javascript">
    var isUniWebview = [[${isUniWebview}]];

    if(!mui.os.plus || isUniWebview) {
        // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
        $('.mui-bar').remove();
    }

    mui.init({
        keyEventBind: {
            backbutton: !isUniWebview //关闭back按键监听
        }
    });

    $(function () {
        $('#btnOk').click(function () {
            if ($('#remark').val() == "") {
                mui.toast("请输入原因");
                return;
            }
            $.ajax({
                    type: "post",
                    url: "../../attendance/punchRemark.do",
                    data: {
                        "userName": [[${userName}]],
                        "id": [[${id}]],
                        "remark": $('#remark').val()
                    },
                    success: function (data, status) {
                    data = $.parseJSON(data);
                    if (data.ret == 1) {
                        $('#remarkBox').html($('#remark').val());
                        $('#btnOk').hide();
                    }
                    mui.toast(data.msg);
                },
                error: function (XMLHttpRequest, textStatus) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        });
    });
</script>
</body>
</html>